<!-- default-active="user"  设置user对应的菜单高亮 ；  :default-openeds="[1]"  设置展开    在<el-menu>标签里面加一个router属性，可实现点击不同的菜单跳转不同的页面-->
<!--加一个router属性，就会根据index里面的内容进行路由跳转 -->


<template>
  <div>
    <el-menu
        style="width:200px; min-height: calc(100vh - 50px);"
        default-active="path"
        router
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
      <el-sub-menu index="1">
        <template #title>系统管理</template>
          <el-menu-item index="/user">用户管理</el-menu-item>
          <!--注意index="book"  代表着路由，和index.js配置的路由要对应起来-->
          <el-menu-item index="/role">角色管理</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/book" >书籍管理</el-menu-item>


    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Aside",
  created() {
    //这个是为了点击某个菜单高亮 上面一开始是写死的
    console.log("路由"+this.$route.path)    //打印结果  /user
  },

  data(){
    return{
      path:this.$router.path
    }
  },

}
</script>

<style scoped>

</style>